<!--党务办学习情况-->
<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></span>
        <div class="header-search flex-center">支部学习情况</div>
      </div>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="statistics-header">
            <h4>{{studySituationItem.partyGroupName}}</h4>
            <p class="record-lists work-message-item-worlds">{{data.title}}份党支部学习安排</p>
          </div>
          <ul class="mui-table-view organization-lists">
            <li class="mui-table-view-cell" v-if="hasList()" v-for="item in data.studyPlanWeekVoList" @click="detail(item)">
              <div class="mine-lists-content ">
                <h2 class="organization-lists-title">周度学习主题：{{item.subject}}</h2>
                <div class="flex-between-center mine-lists-tips">
                  <p>学习时间：{{formatDate(item.studyBeginTime)}}至{{formatDate(item.studyEndTime)}}</p>
                  <span v-if="meetingStatus(item.meetingStatus)" class="mine-lists-money">{{item.meetingStatus}}</span>
                  <span v-if="!meetingStatus(item.meetingStatus)">{{item.meetingStatus}}</span>
                </div>
              </div>
            </li>
          </ul>
          <noData v-if="!hasList() && !isLoading"></noData>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: 'studyPlan',
    data () {
      return {
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        objectsName: '',
        isLoading: false,
        data: {},
        infinite: true,
        pageIndex: 0,
        studySituationItem: {},
        year: new Date().getFullYear()
      }
    },
    created () {
      this.studySituationItem = this.$store.state.studySituationItem
      this.loadData()
    },
    methods: {
      formatDate (s) {
        return moment(s).format('MM-DD')
      },
      detail (data) {
        // 未开展
        if (data.meetingStatus === '未开展') {
          return tools.alert('本次学习暂末开展,无对应集体学习详情记录')
        }
        this.$router.push({path: `/studyDetails/${data.id}`})
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      reloadData () {
        this.pageIndex = 0
        this.swipeData = []
        this.loadData()
      },
      hasList () {
        if (this.data.studyPlanWeekVoList && this.data.studyPlanWeekVoList.length > 0) {
          return true
        }
        return false
      },
      loadData () {
        let monthId = this.$route.params.monthId
        let userInfo = this.$store.state.userInfo
        this.partyGroupId = userInfo.partyMemberModel.partyGroupId
        let data = {
          partyGroupId: this.partyGroupId,
          monthId: monthId
        }
        this.isLoading = true
        loginService.getStudyPlanMonthAndWeekByMonthId(data).then((res) => {
          this.isLoading = false
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.data = res.data
        })
      },
      formateTime (str) {
        moment.lang('zh-cn')
        return moment(str).format('MM月DD日')
      },
      meetingStatus (str) {
        return str === "未开展"
      }
    }
  }
</script>

<style scoped>

</style>
